<div class="main-container">
  <div class="row">
    <div class="free-demo-board" fGrid="12">
      <div [innerHTML]="'DEMO.GRID.DESCRIPTION' | translate"></div>
      <hr>
      <h3 class="free-head-title">{{'DEMO.GRID.NAME' | translate}}</h3>

      <div class="free-demo-row">
        <free-table [striped]="true" [border]="true">
          <free-table-header>
            <free-table-row>
              <free-table-head></free-table-head>
              <free-table-head>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.OPTION.0' | translate"></span><br>
                  (&lt;768px)
                </ng-template>
              </free-table-head>
              <free-table-head>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.OPTION.1' | translate"></span><br>
                  (≥768px)
                </ng-template>
              </free-table-head>
              <free-table-head>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.OPTION.2' | translate"></span><br>
                  (≥992px)
                </ng-template>
              </free-table-head>
              <free-table-head>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.OPTION.3' | translate"></span><br>
                  (≥1200px)
                </ng-template>
              </free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.VALUE.0' | translate"></span>
                </ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template><code>.col-xs</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template><code>.col-sm</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template><code>.col-md</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template><code>.col-lg</code></ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template>
                  <code>.container</code> <span [innerHTML]="'DEMO.GRID.VALUE.1' | translate"></span>
                </ng-template>
              </free-table-cell>
              <free-table-cell>None </free-table-cell>
              <free-table-cell>750px</free-table-cell>
              <free-table-cell>970px</free-table-cell>
              <free-table-cell>1170px</free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.VALUE.2' | translate"></span>
                </ng-template>
              </free-table-cell>
              <free-table-cell [colspan]="4">12</free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.VALUE.3' | translate"></span>
                </ng-template>
              </free-table-cell>
              <free-table-cell [colspan]="4">
                <ng-template>
                  <span [innerHTML]="'YES' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>
                <ng-template>
                  <span [innerHTML]="'DEMO.GRID.VALUE.4' | translate"></span>
                </ng-template>
              </free-table-cell>
              <free-table-cell [colspan]="4">
                <ng-template>
                  <span [innerHTML]="'YES' | translate"></span>
                </ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>
      </div>

      <h3 class="free-head-title">
        {{'DEMO.GRID.DEMODESC' | translate}}
      </h3>

      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;GridModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-demo-row">
        <p>
          {{'DEMO.GRID.USE' | translate}}
        </p>
        <free-code lang="html">
          &lt;div class="row"&gt;
            &lt;div class="col-xs-12"&gt;
              &lt;div class="box"&gt;12&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        </free-code>
      </div>
    </div>
  </div>
</div>
